<template>
  <div >
    <div
      :class="{ common: true, commonClick: clickId === item.id }"
      v-for="(item, index) in element"
      :key="index"
    >
      <div
        class="name"
        :style="{
          paddingLeft: (item.zIndex + 1) * 10 + 'px',
          zIndex: item.zIndex,
        }"
        @click="clickElement(item)"
      >
        {{ item.name }} {{ item.zIndex }}
      </div>
      <div v-if="item.children" class="commonChlidren">
        <phone-div :element="item.children" />
      </div>
    </div>
  </div>
</template>       
<script>
export default {
  name: "phoneDiv",
  props: {
    element: {
      default: [],
      typeof: Array,
    },
    clickId: {
      default: -1,
      typeof: Number,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    clickElement(item) {
      this.$emit("treeClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.common {
  .commonChlidren {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .name {
    display: flex;
    align-items: center;
    padding-left: 15px;
    height: 100%;
    width: 100%;
  }
}
.commonClick {
  background: rgba(0, 0, 0, 0.1);
}
.common:hover {
  background: rgba(0, 0, 0, 0.1);
}
</style>